<style lang="stylus" scoped>
  .h-td-maxwidth
    max-width 150px
</style>

<template>
  <div>
    <q-table
      class="bg-white shadow-1"
      :data="data"
      dense
      :columns="columns"
      row-key="name"
      separator="cell"
      selection="multiple"
      :selected.sync="selected"
      :visible-columns="visibleColumns"
      :pagination.sync="pagination"
      :rows-per-page-options="[3, 5, 10, 20]"
      no-data-label="暂无数据"
      table-class="h-custom"
      @request="listGet"
    >
      <template v-slot:top-right="props">
        <q-select
          v-model="visibleColumns"
          multiple
          borderless
          options-dense
          :display-value="$t('显示列')"
          emit-value
          map-options
          :options="columns"
          option-value="name"
          class="q-mx-lg"
        >
          <template v-slot:option="scope">
            <q-item
              v-bind="scope.itemProps"
              v-on="scope.itemEvents"
              v-if="!scope.opt.required"
            >
              <q-item-section avatar>
                <q-toggle color="blue" v-model="visibleColumns" :val="scope.opt.name" />
              </q-item-section>
              <q-item-section style="min-width:60px">
                {{ scope.opt.label }}
              </q-item-section>
            </q-item>
          </template>
        </q-select>
        <q-toggle
          v-model="searchToggle"
          left-label
          label="搜索"
          color="blue"
          checked-icon="check"
          unchecked-icon="clear"
          keep-color
        />
        <q-btn
          flat round dense
          :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
          @click="props.toggleFullscreen"
          class="q-ml-md"
        />
      </template>
      <template v-if="searchToggle" v-slot:top-row="props">
        <q-tr :props="props">
          <q-td>
            <q-btn color="primary" dense flat icon="search" @click="listGet({ pagination: pagination, filter: searchForm })"/>
          </q-td>
          <q-td v-for="col in props.cols" :key="col.name" class="relative-position">
            <q-input dense outlined v-model="searchForm[col.name]"/>
          </q-td>
        </q-tr>
      </template>
      <template v-slot:header="props">
        <q-tr :props="props">
          <q-th>
            <q-checkbox indeterminate-value="some" dense v-model="props.selected" />
          </q-th>
          <q-th v-for="col in props.cols" :key="col.name" :props="props">
            {{ col.label }}
          </q-th>
        </q-tr>
      </template>
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td width="52">
            <q-checkbox dense v-model="props.selected" />
          </q-td>
          <q-td key="userName" :props="props">
            {{ props.row.userName }}
          </q-td>
          <q-td key="ipAddr" :props="props">
            {{ props.row.ipAddr }}
          </q-td>
          <q-td key="macId" :props="props">
            <div class="text-pre-wrap">{{ props.row.macId }}</div>
          </q-td>
          <q-td key="loginTime" :props="props">
            {{ props.row.loginTime }}
          </q-td>
          <q-td key="createUserName" :props="props">
            {{ props.row.createUserName }}
          </q-td>
          <q-td key="createTime" :props="props">
            {{ props.row.createTime }}
          </q-td>
          <q-td key="updateUserName" :props="props">
            {{ props.row.updateUserName }}
          </q-td>
          <q-td key="lastUpdateTime" :props="props">
            {{ props.row.lastUpdateTime }}
          </q-td>
        </q-tr>
      </template>
      <template v-slot:pagination="props">
        <q-pagination
          v-model="pagination.page"
          color="blue"
          :max-pages="5"
          :max="pages"
          :boundaryLinks="true"
          :directionLinks="true"
        />
        共 {{ total }} 条
      </template>
    </q-table>
  </div>
</template>

<script>
export default {
  name: 'Journal',
  data () {
    return {
      searchToggle: false,
      searchForm: {
        userName: ''
      },
      selected: [],
      visibleColumns: [
        'userName',
        'ipAddr',
        'macId',
        'loginTime',
        'createUserName',
        'createTime',
        'updateUserName',
        'lastUpdateTime'
      ],
      columns: [
        {
          name: 'userName',
          required: true, // 当加入此属性时  visibleColumns 对当前字段无效
          label: '用户名',
          align: 'left',
          field: 'userName',
          sortable: true
        },
        { name: 'ipAddr', align: 'left', label: 'IP地址', field: 'ipAddr', sortable: true },
        { name: 'macId', label: 'mac地址', align: 'left', field: 'macId', sortable: true },
        { name: 'loginTime', align: 'left', label: '登陆时间', field: 'loginTime', sortable: true },
        { name: 'createUserName', align: 'left', label: '创建人', field: 'createUserName', sortable: true },
        { name: 'createTime', align: 'left', label: '创建时间', field: 'createTime', sortable: true },
        { name: 'updateUserName', align: 'left', label: '更新人', field: 'updateUserName', sortable: true },
        { name: 'lastUpdateTime', align: 'left', label: '最后更新时间', field: 'lastUpdateTime', sortable: true }
      ],
      data: [],
      total: 0,
      pagination: {
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 10,
        sortBy: '',
        descending: ''
      }
    }
  },
  validations: {
  },
  computed: {
    pages () {
      return Math.ceil(this.data.length / this.pagination.rowsPerPage)
    }
  },
  watch: {
    'pagination.page' () {
      this.listGet({
        pagination: this.pagination,
        filter: this.searchForm
      })
    }
  },
  mounted () {
    this.listGet({
      pagination: this.pagination,
      filter: this.searchForm
    })
  },
  methods: {
    async listGet (props) {
      let { page, rowsPerPage, sortBy, descending } = props.pagination, filter = props.filter
      await this.$api({
        baseUrl: 'http://118.178.94.163:9093',
        method: 'post',
        url: '/logs/user/login/query',
        params: {
          pageNo: page,
          pageSize: rowsPerPage,
          sort: sortBy,
          order: descending === true ? 'desc' : (descending === false ? 'asc' : ''),
          ...filter
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          this.total = data.total
          this.data = data.list
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
      this.pagination.page = page
      this.pagination.rowsPerPage = rowsPerPage
      this.pagination.sortBy = sortBy
      this.pagination.descending = descending
    }
  }
}
</script>
